<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
    <div>
        <label for="txtLabel">文本</label>
        <input id="txtLabel" v-model="message"> {{message}}
    </div>
    <div>
        <label for="areaLabel">文本</label>
        <textarea id="areaLabel" v-model="message"></textarea>
    </div>

    <div>
        <label for="singleChk">单复选框</label>
        <input id="singleChk" type="checkbox" v-model="checked"> {{checked}}

        <div>
            多复选框：
            <input id="tom" value="Tom" type="checkbox" v-model="checkedNames">
            <label for="tom">Tom</label>
            <input id="jack" value="Jack" type="checkbox" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input id="nick" value="Nick" type="checkbox" v-model="checkedNames">
            <label for="nick">Nick</label>
            朋友们：{{checkedNames}}
        </div>

        <div>
            单选项
            <select v-model="selectedCity">
                <option disabled value="">请选择</option>
                <option v-for="city in cities" v-bind:value="city">{{city}}</option>
            </select>
            喜欢的城市：{{selectedCity}}
        </div>

        <div>
            多选项
            <select v-model="selectedCities" multiple>
                <option disabled value="">请选择</option>
                <option v-for="city in cities" v-bind:value="city">{{city}}</option>
            </select>
            喜欢的城市：{{selectedCities}}
        </div>

    </div>

     .lazy change 事件之后 进行同步
    <input v-model.lazy="message"> {{message}}

    <input v-model.number="age" type="number"> {{age}}

    .trim 过滤首尾空格
    <input v-model.trim="message"> {{message}}


</div>
<script>
    const  vm = new Vue(
        {
            el:"#app",
            data:{
                message:'Hello Vue!',
                checked:true,
                checkedNames:[],
                cities:['bj','sh','gz'],
                selectedCity:'',
                selectedCities:[],
                age:10
            }
        }
    )

</script>


</body>
</html>